<template>
    <section class="SiteNav-section">
        <app-header></app-header>

        <!--背景图-->
        <article class="bg-box">
            <div class="inside">
                <div class="container">
                    <h2>Site Navigation</h2>
                    <h1>
                        <p class="clearfix">
                            <i class="iconfont icon-qianwang1"></i> 网站导航
                        </p>
                    </h1>
                </div>
            </div>
        </article>

        <!--中间内容-->
        <div class="content">
            <div class="container">
                <article>
                    <div class="list">
                        <div class="title">【首页】</div>
                        <aside class="inner">
                            <router-link to="/" title="首页" alt="首页">首页</router-link>
                        </aside>
                    </div>
                    <div class="list">
                        <div class="title">【海外房产】</div>
                        <aside class="inner">
                            <router-link to="/USEstate" title="美国新房" alt="美国新房">美国新房</router-link>
                            <router-link to="/UsedUSEstate" title="美国二手房" alt="美国二手房">美国二手房</router-link>
                            <router-link to="/THEstate" title="泰国房产" alt="泰国房产">泰国房产</router-link>
                            <router-link to="/GREstate" title="希腊房产" alt="希腊房产">希腊房产</router-link>
                            <router-link to="/JPEstate" title="日本房产" alt="日本房产">日本房产</router-link>
                        </aside>
                    </div>
                    <div class="list">
                        <div class="title">【移民留学】</div>
                        <aside class="inner">
                            <router-link to="/USImmigration" title="美国移民" alt="美国移民">美国移民</router-link>
                            <router-link to="/USStudyAbroadHighSchool" title="美国留学" alt="美国留学">美国留学</router-link>
                            <router-link to="/GRImmigration" title="希腊移民" alt="希腊移民">希腊移民</router-link>
                            <router-link to="/GRStudyAbroad" title="希腊留学" alt="希腊留学">希腊留学</router-link>
                            <router-link to="/EUImmigration" title="欧洲移民" alt="欧洲移民">欧洲移民</router-link>
                        </aside>
                    </div>
                    <div class="list">
                        <div class="title">【美元理财】</div>
                        <aside class="inner">
                            <router-link to="/USInsurance" title="海外保险" alt="海外保险">海外保险</router-link>
                            <router-link to="/USFund" title="美国基金" alt="美国基金">美国基金</router-link>
                        </aside>
                    </div>
                    <div class="list">
                        <div class="title">【海外房地产资讯】</div>
                        <aside class="inner clearfix">
                            <router-link :to="{name: 'NewsSecondaryList', params: {type: '6' }}" title="海外房产" alt="海外房产">海外房产</router-link>
                            <router-link :to="{name: 'NewsSecondaryList', params: {type: '7' }}" title="海外财经" alt="海外财经">海外财经</router-link>
                            <router-link :to="{name: 'NewsSecondaryList', params: {type: '8' }}" title="移民留学" alt="移民留学">移民留学</router-link>
                            <router-link :to="{name: 'NewsSecondaryList', params: {type: '9' }}" title="海外生活" alt="海外生活">海外生活</router-link>
                        </aside>
                    </div>
                    <div class="list">
                        <div class="title">【资讯·直播】</div>
                        <aside class="inner">
                            <router-link to="/News" title="海外资讯" alt="海外资讯">海外资讯</router-link>
                            <router-link to="/Video" title="海外直播" alt="海外直播">海外直播</router-link>
                        </aside>
                    </div>
                    <div class="list">
                        <div class="title">【关于华美优胜】</div>
                        <aside class="inner">
                            <router-link to="/About" title="公司简介" alt="公司简介">公司简介</router-link>
                            <router-link to="/Exhibition" title="历届展会" alt="历届展会">历届展会</router-link>
                            <router-link to="/SuccessfulCases" title="成功案例" alt="成功案例">成功案例</router-link>
                            <router-link to="/counselor" title="置业顾问" alt="置业顾问">置业顾问</router-link>
                            <router-link to="/contactUs" title="联系我们" alt="联系我们">联系我们</router-link>
                            <router-link to="/SiteCooperation" title="网站合作" alt="网站合作">网站合作</router-link>
                            <router-link to="/Jobs" title="招聘信息" alt="招聘信息">招聘信息</router-link>
                            <router-link to="/PrivacyAgreement" title="隐私协议" alt="隐私协议">隐私协议</router-link>
                        </aside>
                    </div>
                    <div class="list">
                        <div class="title">【华美优胜动态】</div>
                        <aside class="inner">
                            <router-link to="/Exhibition" title="展会活动" alt="展会活动">展会活动</router-link>
                        </aside>
                    </div>
                    <div class="list">
                        <div class="title">【问答百科】</div>
                        <aside class="inner">
                            <router-link to="/Question" title="常见问题" alt="常见问题">常见问题</router-link>
                        </aside>
                    </div>
                    <div class="list">
                        <div class="title">【中美置业团队】</div>
                        <aside class="inner">
                            <router-link to="/Counselor" title="中美置业团队介绍" alt="中美置业团队介绍">中美置业团队介绍</router-link>
                        </aside>
                    </div>
                </article>
            </div>
        </div>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../components/header.vue';//公共组件——头部
    import BackTop from '../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {}
        },
        metaInfo () {
            return {
                title: '网站导航_华美优胜美国房地产投资公司',
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: '网站导航_华美优胜美国房地产投资公司' },
                    { vmid: 'description', name: 'description', content: '网站导航_华美优胜美国房地产投资公司' },

                ],
            }
        },
        computed: {},
        created() {
        },
        mounted() {

        },
        methods: {},
        components: {
            'app-header': Header,
            BackTop,
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        .SiteNav-section {
            //背景图
            .bg-box{
                background: url(/static/img/Site-Navigation-bg.jpg) no-repeat top center;
                background-size: 100%;
                padding: 0 !important;
                >.inside {
                    background: rgba(15, 40, 54, 0.6);
                    > .container {
                        padding: 150px 0;
                        text-align: center;
                        > h2 {
                            font-size: 35px;
                            font-family: 'HelveticaNeue-UltraLight', "PingFang SC", 'Microsoft Yahei', Arial, Verdana, sans-serif;
                            font-weight: 100;
                            color: #fff;
                        }
                        > h1 {
                            line-height: 35px;
                            font-size: 30px;
                            padding: 20px 0 30px 0;
                            color: #fff;
                            > p {
                                display: inline-block;
                                > i {
                                    font-size: 35px;
                                    color: #3cd0c5;
                                    float: left;
                                    margin: 0 10px 0 0;
                                }
                            }
                        }
                    }
                }
            }

            .content {
                background: #fff;
                > .container {
                    padding: 30px;
                    text-align: center;
                    >h3{
                        font-size: 25px;
                        font-family: 'HelveticaNeue-UltraLight', "PingFang SC", 'Microsoft Yahei', Arial, Verdana, sans-serif;
                        font-weight: 100;
                    }
                    >h4{
                        line-height: 35px;
                        font-size: 20px;
                        padding: 20px 0 30px 0;
                        >p{
                            display: inline-block;
                            line-height: 30px;
                            >i{
                                font-size: 25px;
                                color: #3cd0c5;
                                float: left;
                                margin: 0 10px 0 0;
                            }
                        }
                    }
                    >article{
                        width: 700px;
                        margin: 100px 0 0 0;
                        >.list{
                            margin: 30px 0;
                            text-align: left;
                            >.title{
                                padding: 0 0 0 10px;
                                border-left: 4px solid #00A4A0;
                                margin-bottom: 20px;
                                font-size: 16px;
                                font-weight: bold;
                            }
                            >aside{
                                padding: 30px 0;
                                border-top: 1px solid #E5E5E5;
                                >a{
                                    float: left;
                                    margin: 0 0 0 30px;
                                }
                                >a:first-of-type{
                                    margin: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
